<template>
  <div>
    <!-- 线体 站点  班次  起始日期   -->
    <div class="activ_cont">
      <div class="active_serch">
        <el-form class="table_serch">
          <div class="table_serch_labe" style="margin-left: 5px">
            <div class="table_serch_labe_title">线体</div>
                  <Linedrpdown  @change='onchange' :linedroplist="linedroplist" :formInline="formInline"></Linedrpdown>
          </div>

          <div class="table_serch_labe" style="margin-left: 13px">
            <div class="table_serch_labe_title">设备</div>
              <!-- <Siteandown :sitedrwn="sitedrwn" :formInline="formInline"></Siteandown> -->
               <el-select
               v-model="formInline.site"
               clearable
               size="mini"
               style="margin-left: 5px; margin-top: 8px; width: 140px"
               placeholder="请选择内容"
                >
                <el-option v-for="(item,index) in this.siteItems" :key="index" :label="item"  :value="item"></el-option>
                 </el-select>
          </div>

          <div class="table_serch_labe" style="margin-left: 13px">
            <div class="table_serch_labe_title">班次</div>
            <el-form-item label="">
               <el-select
               v-model="formInline.class"
               clearable
               size="mini"
               style="margin-left: 5px; margin-top: 0px; width: 140px"
               placeholder="请选择内容"
                >
                <el-option label="白班"  value="白班"></el-option>
                <el-option label="夜班"  value="夜班"></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">起始日期</div>
            <el-form-item label="">
              <StartTime :formInline="formInline"></StartTime>
            </el-form-item>
          </div>

          <div class="table_serch_labe">
            <div class="table_serch_labe_title" style="margin-left: 10px">
              结束日期
            </div>
            <el-form-item label="">
              <Endtime :formInline="formInline"></Endtime>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-right:0px">
            <el-button
              type="primary"
              size="mini"
              @click="formInlineclick"
              style="height: 30px; margin-top: 6px"
              >查询</el-button
            >
          </div>
        </el-form>
      </div>
      <div class="active_active">
           <div class="active_active_title">
                <el-input
                  style="width:150px; margin-left: 20px;"
                  v-model="lower"
                  placeholder="请输入稼动率目标"
                  size="mini"
                  @keyup.enter.native="keydowond"
                ></el-input>
           </div>
           <div id="active_bar"></div>
      </div>
      <div class="active_TT">
              <div  id="active_TT_bar"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import Siteandown from '../../../components/siteandown/Siteandown'
import Linedrpdown from '../../../components/Linedropdown/Linedropdown'
import Endtime from '../../../components/endTime/Endtime'
import StartTime from '../../../components/StarTime/StartTime'
export default {
    name:"Activation",
    components: {
    Linedrpdown,
    Endtime,
    StartTime
  },
  data() {
    return {
      lower:'',
      formInline: {
        line: "",
        site: "",
        endtime: "",
        class: "",
        starttime: "",
      },
      restaurants: [],
      TTuplist:[],
      devState:[],
      xAis:[],
      linedroplist:[],
      sitedrwn:[],
      linelist:[],
      siteItems:[],
      Dowperlist:[]
    };
  },
  mounted() {
    this.getModelnolist()
  },
  methods: {

   onchange(){
     this.siteItems=[]
          this.sitedrwn.forEach((ele)=>{
            if(ele.ID.includes(this.formInline.line)){
              this.siteItems.push(ele.ID)
            }
         })
    },


    formInlineclick() {
      if(this.formInline.starttime==""){
           this.$message({
                showClose: true,
                message: "起始日期不能为空",
                type: "warning",
              });
      }else if(this.formInline.endtime==""){
         this.$message({
                showClose: true,
                message: "结束日期不能为空",
                type: "warning",
              });
      }else if(this.formInline.endtime < this.formInline.starttime){
          this.$message({
                showClose: true,
                message: "结束日期不能小于起始日期",
                type: "warning",
              });
      }else{
        this.ajax
          .get(
            `prod/1017?line=${this.formInline.line}&site=${this.formInline.site}&endtime=${this.formInline.endtime}&class=${this.formInline.class}&starttime=${this.formInline.starttime}`
          )
          .then((res) => {
            console.log(res.data);
            this.TTuplist = res.data.TT;
            this.devState = res.data.devState;
            this.xAis = res.data.xAis;
            this.linelist = res.data.per;
            this.Dowperlist = res.data.DowntimePer;
            if(this.TTuplist){
                this.fourthbarchart()
            }
            if(this.devState.length){
              var char_1 = this.$echarts.init(document.getElementById("active_bar"));
              char_1.dispose();
              this.devStateBar()
            }else{
                // console.log('为空')
                 this.$message({
                    showClose: true,
                    message: '数据返回为空，请重新重新请求',
                    type: 'error'
                  });
                this.$router.go(0);
            }
          });
      }
    },
         getModelnolist(){
        this.ajax(`func/1023/selProductList`).then((res)=>{
          if(res.status == 200){
             this.linedroplist = res.data.line;
             this.sitedrwn = res.data.eqp;
          }
        })
    },
     
       //输入柱状图目标数值
        keydowond() {
          // var char_1 = this.$echarts.init(document.getElementById("active_bar"));
          // char_1.dispose();
          // console.log(this.lower);
          this.devStateBar()
        },
  
    //稼动率柱状图
     devStateBar(){
       let mysvg = this.$echarts.init(document.getElementById("active_bar"));
      //  console.log("获取柱状图数据q111111111111", this.devState);
      let dataname = [];
      let datalist = [];
      let titlename = [];
      let list = [];
      let line = [];
      let lowerlist = [];
      let lowercont = this.lower;
      let colorList = []
   
      console.log(lowercont)
      for (let i = 0; i < this.devState.length; i++) {
        dataname.push(this.devState[i].key);
        datalist=this.devState[i].val;
      }
       var NemeList =  dataname.concat('稼动率','宕机率','目标值')  

        for (let i = 0; i < datalist.length; i++) {
            titlename.push(datalist[i].key);
        }
 
        for(let i=0; i<this.linelist.length;i++){
            line.push(this.linelist[i].val)
        }
         
        for (let i = 1; i < 20; i++) {
          lowerlist.push(this.lower);
        }
        
         
        if(NemeList.length==7){
          
            colorList = ['#336699','#00CC00','#0099CC','#CC6600','#999999','red','#00CC00']
        }else if(NemeList.length==8){
       
           colorList =  ['red','#996600','#0099CC ','#CC6600','#999999','#00CC00','#CC6600','#336699']
        }else if(NemeList.length==9){
    
           colorList =  ['red','#0099CC','#33CC33','#CC6600','#999999','#0099CC','#00CC00','#336699','#9933FF']
        }
          this.devState.forEach((ele)=>{
                  list.push(
                        {
                          name: ele.key,
                          data: ele.val.map((item) => {
                          return item;
                            }),
                          type: "bar",
                          stack: "a",
                          barWidth: "15%",
                            itemStyle:{
                                normal:{
                                }
                            },
                          label: {
                          position: "insideRight",
                          normal: {
                          // show:true, //是否显示
                          // formatter: "{a}{b}:{c}%",
                            },
                         },
                        },
                         {
                           name:"稼动率",
                          type: "line",
                          // stack: "1",
                          data: line,
                          yAxisIndex:1,
                          itemStyle:{
                            // color: "#9933FF",
                             normal:{
                               color:function(params){
                                 if(params.value<lowercont){
                                   return 'red'
                                 }else{
                                   return '#9933FF'
                                 }
                               }
                             }
                          },
                          label: {
                            normal: {
                              show: true,
                              position: "insideRight",
                              //  formatter: "{a} <br/>{b}:({c}%)",
                              formatter: function (params) {
                                  
                                //标签内容
                                return params.value + "%";
                              },
                            },
                          },
                        },
                        {
                          name: "宕机率",
                          type: "line",
                          data: this.Dowperlist.map((item)=>{
                            return item.val
                          }),
                          yAxisIndex:1,
                            label: {
                               normal:{
                                 show: true,
                                  position: "insideRight", 
                                   formatter: function (params) {
                                    return params.value + "%";
                                  },
                               }   
                            },
                        },
                         {
                          name: "目标值",
                          type: "line",
                          data: lowerlist,
                          yAxisIndex:1,
                          markLine: {
                            symbol: "none",
                            label: {
                              show: true,
                              position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                              // formatter: `${lower}`,
                            },
                            data: [
                              {
                                silent: false, //鼠标悬停事件  true没有，false有
                                lineStyle: {
                                  //警戒线的样式  ，虚实  颜色
                                  type: "solid",
                                  // color: "red",
                                },
                                yAxis: this.lower, //警戒线在y轴的坐标
                              },
                            ],
                          },
                        },
                    );    
          })
        
      
       var option =  {
         color:colorList,
        //  ['#FF9966','#996600','#990033','#CC6600','#999999','#CCCC33','#CC6600','#336699'],
        option: true,
        
          title:[
             {
              text: "稼动率统计",
              x: "center",
              y: "5%",
              textStyle: {
                fontSize: 15,
                fontWeight: 400,
              },
              
           },
            {
                subtext:"纵轴单位(分钟)",
                subtextStyle:{
                align:"left",
                lineHeight: 146,
                fontSize:10,
                  padding: 15,
               }
           }
        ],
        tooltip: {
           position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
          trigger: "item",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            
          },
        },
        
        
        legend: {
          data: NemeList,
           type: "scroll",
           top:"13%",
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "4%",
          height: 300,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          show:true,
          data: this.xAis,
           axisLabel: {
              interval:0,
              rotate: 60,
            },
          
        },
        yAxis: 
        [
          {
          type: "value",
          min: 0,

          },
          {
             type: "value",
              min: 0,
              max: 100,
              interval: 50,
              axisTick: {show:false},
                 axisLine: {
                    lineStyle: {
                       color: '#000'
                       }
                  },
             axisLabel: {
               formatter:'{value}%',
              },
          }
        
        ],

        series:list
      };
     mysvg.setOption(option)
      window.onresize = function(){
          mysvg.resize()
        }
     },

     
       //TT柱状图
    fourthbarchart() {
      let fourt_barchart = this.$echarts.init(
        document.getElementById("active_TT_bar")
      );
      let list = [];
      let keylist = [];
      let listdata = [];
      for (let i = 0; i < this.TTuplist.length; i++) {
        list.push(this.TTuplist[i].val);
        keylist.push(this.TTuplist[i].key)
      }
      // console.log("1111111111111111", this.TTdata);

      var num;
      for (let i = 0; i < list.length; i++) {
        num = list[i];
        listdata.push(num.toFixed(3));
      }
      var ony = listdata.map(Number);

 

      var opntin = {
        title: 
        [{
          text: "TT产能统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
           {
                subtext:"纵轴单位(秒数)",
                subtextStyle:{
                align:"left",
                lineHeight: 46,
                fontSize:10
               }
           }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["1", "2"],
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: keylist,
          axisLabel: {
              interval: 0,
              rotate: 60,
            },
       
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "",
            type: "bar",
            stack: "1",
             barWidth: "10%",
            label: {
              show: true,
              position: "insideRight",
            },
            data: ony,
          },
        ],
      } 
      window.onresize = function(){
        fourt_barchart.resize()
        }
      fourt_barchart.setOption(opntin);
    },



    loadAll() {
      // return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
  },
};
</script>

<style  scoped>
.activ_cont {
  width: 100%;
}
.active_serch {
  width: 100%;
  /* border: 1px solid #000; */
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px gainsboro;
  display: flex;
  justify-content: space-between;
}

.active_active {
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 30px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px gainsboro;
}
.active_TT {
  width: 100%;
  /* border: 1px solid blue; */
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px gainsboro;
  margin-top: 30px;
}

.table_serch {
  width: 100%;
  min-width: 900px;
  /* background: #ffffff; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  /* border:1px solid #000; */
  height: 40px;
  display: flex;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
#active_bar
{
    width:100%;
    height:60vh;
}
#active_TT_bar
{
    width:100%;
    height:50vh;
}

.active_active_title
{
  width:100%;
  background: #ffffff;
}
@media screen  and (min-width:1920px) {
   #active_bar
   {
     width:100%;
     height:50vh;
   }
}
</style>
